<script setup>
import {menu_tree} from "@/apis/v1/menu/menu.js";
import {logout} from "@/apis/v1/user/login.js";
import {useRoute, useRouter} from "vue-router";
import {useUserStore, useTokenStore} from "@/store/user.js";
import {ElMessage} from "element-plus";
import {ArrowDown, Promotion, SwitchButton, User} from "@element-plus/icons-vue";

const BASE_IMG_URL = ref(import.meta.env.VITE_APP_IMG_API);
const BASE_BED_IMG_URL = ref(import.meta.env.VITE_APP_BED_IMG_API);
const route = useRoute();
const router = useRouter();
const usersStore = useUserStore();
const tokenStore = useTokenStore();
const path = ref(null);
watchEffect(() => {
  path.value = route.path;
});
const menuList = ref([]);
const getMenuTree = () => {
  menu_tree().then(res => {
    menuList.value = res.result;
  });
};
const cancel = () => {
  logout().then(res => {
    if (res.code !== 200) {
      ElMessage.error(res.message);
    } else {
      ElMessage.success(res.message);
      usersStore.clearUser();
      tokenStore.clearToken();
      setTimeout(() => {
        router.go(0);
      }, 1000);
    }
  });
};

onMounted(() => {
  getMenuTree();
});
</script>

<template>
  <nav>
    <ul class="nav-list">
      <li v-for="(menu, index) in menuList" :key="index"
          :class="path === menu.path ? 'active' : ''">
        <img class="svg-icon" :src="BASE_BED_IMG_URL+menu.icon" alt="">
        <router-link class="router-link" :to="menu.path"
                     v-if="menu.type === 1">
          <span>{{ menu.title }}</span>
        </router-link>
        <el-dropdown v-else>
          <span class="span">
            {{ menu.title }}
            <el-icon color="#fff" class="el-icon--right"><arrow-down/></el-icon>
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item :icon="item.icon" v-for="item in menu.children" :key="item.id">
                <span @click="router.push(menu.path + item.path)">{{ item.title }}</span>
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </li>
      <li>
        <el-dropdown>
          <img class="avatar" alt=""
               :src="usersStore.user.id?BASE_IMG_URL + usersStore.user.avatar:
             BASE_IMG_URL + '/static/img/user/visitor.jpg'"/>
          <template #dropdown v-if="!usersStore.user.id">
            <el-dropdown-menu>
              <el-dropdown-item :icon="Promotion">
                <router-link class="router-link" to="/user/login">登录</router-link>
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
          <template #dropdown v-else>
            <el-dropdown-menu>
              <el-dropdown-item :icon="Promotion">
                <router-link to="/">发布文章</router-link>
              </el-dropdown-item>
              <el-dropdown-item :icon="User">
                <router-link to="/">个人中心</router-link>
              </el-dropdown-item>
              <el-dropdown-item :icon="SwitchButton">
                <span @click="cancel">注销账户</span>
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </li>
    </ul>
  </nav>
</template>

<style scoped lang="less">
nav {
  color: white;
  user-select: none;

  .nav-list {
    list-style: none;
    margin-right: 25px;
    display: flex;
    justify-content: flex-end;

    li {
      cursor: pointer;
      position: relative;
      margin: 0 12px;
      height: 60px;
      font-size: 14px;
      display: flex;
      align-items: center;

      .avatar {
        width: 45px;
        height: 45px;
        border-radius: 50%;
      }

      span {
        border: none;

        &:hover {
          color: var(--theme-color);
        }
      }

      .router-link {
        color: white;
      }

      .el-dropdown {
        .span {
          color: white;
          display: flex;
          align-items: center;
        }
      }

      .el-tooltip__trigger:focus {
        outline: none;
      }
    }

    .active {
      span {
        color: var(--theme-color) !important;
      }
    }
  }
}
</style>